/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    Image,
    TouchableOpacity,
    TextInput,
    ImageBackground,
} from 'react-native';

export default class Regist extends React.Component {

    static  navigationOptions = {
        title:'注册'
    };

    render() {
        return (
            <View style={{ flex: 1,  alignItems: 'center' , backgroundColor:'white',
            }}>
                 <Image style={styles.LogoImageStyle} source={{uri:'logo'}} />

                <View style={styles.PhoneViewStyle}>
                    <Text style={{marginLeft:27}}>手机号</Text>
                    <TextInput style={{marginLeft:30}} placeholder='手机号'></TextInput>
                    <Text style={styles.lineViewStyle}></Text>
                </View>

                <View style={styles.CodeViewStyle}>
                    <Text style={{marginLeft:27}}>验证码</Text>
                    <TextInput style={{marginLeft:30}} placeholder='验证码'></TextInput>

                        <View style={styles.CodeTextViewStyle}>
                            <Text style={styles.CodeTextStyle}>发送验证码</Text>
                        </View>

                    <Text style={styles.lineViewStyle}></Text>

                </View>

                <View style={styles.PwdViewStyle}>
                    <Text style={{marginLeft:27}}>设置密码</Text>
                    <TextInput style={{marginLeft:30}} placeholder='密码'></TextInput>
                    <Text style={styles.lineViewStyle}></Text>

                </View>


                <View style={styles.AgreementViewStyle}>
                    <ImageBackground style={{height:10,width:10,marginLeft:27}} source={{uri:'评价管理－星评-选中'}} resizeMode='cover'>
                    </ImageBackground>
                    <Text style={{marginLeft:5}}>已阅读并同意</Text>
                    <Text style={{color:'orange'}}>《用户服务协议》</Text>
                </View>

                <TouchableOpacity >
                <View style={styles.RegViewStyle}>
                    <Text style={{color:'white',fontSize:16}}>注册</Text>
                </View>
                </TouchableOpacity>
            </View>
        );
    }

}

const styles  = StyleSheet.create({

    LogoImageStyle:{
        marginTop:30,
        // flexDirection: 'row',
        // alignItems: 'center',
        // justifyContent: 'center',
        width:132,
        height:59,

    },

    PhoneViewStyle:{
        marginTop:49,
        width:375,
        height:50,
        flexDirection: 'row',
        alignItems: 'center',
        // backgroundColor:'red'
    },

    CodeViewStyle:{
        marginTop:20,
        width:375,
        height:50,
        flexDirection: 'row',
        alignItems: 'center',
        // backgroundColor:'red'

    },

    PwdViewStyle:{
        marginTop:20,
        width:375,
        height:50,
        flexDirection: 'row',
        alignItems: 'center',
        // backgroundColor:'red'

    },

    AgreementViewStyle:{
        marginTop:40,
        width:375,
        height:30,
        flexDirection: 'row',
        alignItems: 'center',
        // backgroundColor:'red'

    },

    CodeTextViewStyle:{
        width:89,
        height:38,
        borderRadius:3,
        backgroundColor:'orange',
        alignSelf: 'center',
        justifyContent:'center',

        position: 'absolute',
        right: 30,
    },

    CodeTextStyle:{
        color:'white',
        textAlign: 'center',

    },

    lineViewStyle:{
        // width: 335,
        height:0.5 ,

        position: 'absolute',
        bottom: 0,
        left: 27,
        right: 27,
        backgroundColor: '#cccccc',

    },



    RegViewStyle:{
        marginTop:30,
        backgroundColor:'orange',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
        width: 335,
        height:40,
        borderRadius:3,

    }

})



module.exports = Regist;


